There are many HTML elements with properties (i.e. attributes) that can be used to make your webpages more accessible. Below is a description of the most common accessibility attributes you will come across when using HotDog. If you would like to learn more about designing for accessibility using HotDog Pro, read the discussion on Accessibility or the Instructions for Checking Accessibility.
This attribute allows you to provide an alternative text description for the element that can be displayed with non-visual browsers. Alternative text descriptions serve as content when the elements on your document are not rendered normally. This makes your web page more accessible. Specifying alternate text assists users without graphic display terminals, users whose browsers don't support forms, visually impaired users, those who use speech synthesizers, those who have configured their graphical user agents not to display images, etc.
For example, you can include an alternative text description with an image element using:
|
<IMG SRC="graphics/city_to_narnia_map.gif" ALT="Map to show the quickest way to Narnia from the city. - 4KB"> You can do this using the Insert Image Wizard. |
Effective alternate text should generally give the function of the image rather than a description of the image. Also, do not specify meaningless or irrelevant alternate text. Not only will this frustrate users, it will slow down web browsers that must convert text to speech or Braille output. Good alternate text is crucial to the document's accessibility for the significant portion of users who do not load images.
Assigning access keys to the elements in your document allows viewers to navigate your web pages simply by pressing the <ALT> key plus the access key you have specified for each element. This makes your web page more accessible.
An access key is a single character from the document character set. When assigning access keys, make sure to consider the likely input method of your viewers. When your viewer presses the <ALT> key and an access key you have assigned to an element then focus will be given to that element.
For example, you can assign an access key to a link on your webpage:
|
<A HREF="http://www.sausagetools.com/" ACCESSKEY="B">Click here with your mouse to go to the Sausage Software website. Alternatively, just press <ALT>+<B> to get to this link and then press <ENTER>.</A> You can do this using the Insert Hyperlink Wizard. |
Assigning tab indices to the elements in your document allows viewers to navigate your web pages by tabbing. This makes your web page more accessible.
Within Hotdog Pro, the Tab Index must be a number between 0 and 501. Navigation proceeds from the element with the lowest tab index value to the element with the highest value. Therefore, the tab index you provide will indicate the position of the element in the tabbing order. The tabbing order may include elements nested within other elements.
For example, you can assign a tab index to a link on your webpage using:
|
<A HREF="http://www.sausagetools.com/" TABINDEX="4">Click here with your mouse to go to the Sausage Software website. Alternatively, just tab to this link and then press <ENTER>.</A> You can do this using the Insert Hyperlink Wizard. |
This attribute should be used to provide a long description of an image where this would be useful. For example, a painting, graph, or corporate logo could be given a description so that visually impaired and other text-only users can develop a mental picture of the image:
|
<IMG SRC="graphics/roses.gif" ALT="Gif Image of Roses - 4KB" LONGDESC="http://www.isp.com/name/roses_image_description.html/"> You can do this using the Insert Image Wizard. |
This attribute is also available in the Frame Desc URL field within Frame Wizard. The Frame Desc URL field can be used to specify a link to a long description of the selected frame. This description should supplement the short description provided using the NAME attribute (described further below) for any frames on your webpage.
An accessibility feature included within the Frame Wizard is the No Frames Link. This field can be used to specify the location of alternate content that can be displayed by web browsers that don't support frames or are configured not to display frames. For instance, if you have created a version of your webpage with no frames, called no_frames_homepage.html then the code you insert within your HTML document (below your FRAME or FRAMESET tags) might look something like:
|
<NOFRAMES> <A HREF="http://www.isp.com/no_frames_homepage.html">Frame Link: http://www.mine.com/no_frames_homepage.html</A> </NOFRAMES> |
The NAME attribute gives a name to an element and (as with the ALT attribute) is commonly implemented as a tooltip on visual browsers. The attribute value must begin with a character in the range A-Z or a-z.
The NAME should be informative and be based on the content of the element since non-Windows browsers may use the NAME as a title for the element. For example, NAME=left would be inappropriate since it says nothing about the content while NAME=nav would be inappropriate since it is not very informative. More suitable would be NAME=Navigation. The TITLE attribute can also be used to provide a slightly longer title for the frame, though this is not widely supported by current browsers.
|
<FRAMESET COLS="50%,50%"> <FRAME NAME="Sausage Software's International Site" SRC="http://www.sausagetools.com/"> <FRAME NAME="Sausage Software's Australian Site" SRC="http://www.sausagetools.com.au/"> </FRAMESET> |
The NAME attribute can also be used with the A, AREA, BASE, FORM, and LINK elements.
|
For example, in your webpage, you may wish to create an anchor to another section of your website as follows: <A HREF="#Picture_Section">Click here to view the pictures on this webpage.</A> At the section that you wish to link to, you can then just insert the following code: <A NAME="Picture_Section"></A> For more information about using targets within your webpages, read the Insert Link tutorial. |
The TITLE attribute provides a title for an element and (as with the ALT attribute) is commonly implemented as a tooltip on visual browsers, though many browsers lack support for TITLE. This accessibility attribute is provided in the HotDog Forms wizard and would be inserted into your document in a similar format as shown below:
|
<FORM METHOD="POST" TITLE="SURVEY FORM">.........</FORM> |
The TITLE attribute, however, is most useful with A, LINK, IMG, and OBJECT elements, where it provides a title for the linked or embedded resource. Some examples follow:
|
<A HREF="mailto:support@my_company.com" TITLE="Customer Feedback">support@my_company.com</A> <IMG SRC="yahtzee.gif" TITLE="A Yahtzee Animation"> <LINK REL=Alternate HREF="index.fr.html" HREFLANG=fr LANG=fr TITLE="Version française"> |
TITLE is also helpful with the ABBR and ACRONYM elements to provide the long form of the abbreviation. For example:
|
He weighs 180 <ABBR TITLE="pounds">lbs</ABBR>. |